﻿<ContentControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    
    xmlns:WinChrome="clr-namespace:WinChrome;assembly=WinChrome"

    xmlns:local="clr-namespace:WPFShowcase.View"

    x:Name="contentControl"
    mc:Ignorable="d"
    x:Class="WPFShowcase.View.Flyout" d:DesignWidth="75" d:DesignHeight="32"  >
    <ContentControl.Style>
        <Style TargetType="{x:Type ContentControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ContentControl}">
                        <DockPanel x:Name="bd" Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="Resizing">
                                    <VisualState x:Name="Expanded">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="header" Storyboard.TargetProperty="Background.Color"
                                				From="Transparent"
                                				To="{DynamicResource {x:Static SystemColors.HotTrackColorKey}}"
                                				Duration="0:0:0.25"/>
                                            <ColorAnimation Storyboard.TargetName="marker" Storyboard.TargetProperty="Background.Color"
                                				From="{DynamicResource {x:Static SystemColors.ControlLightColorKey}}"
                                				To="Transparent"
                                				Duration="0:0:0.25"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Collapsed">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="header" Storyboard.TargetProperty="Background.Color"
                                				From="{DynamicResource {x:Static SystemColors.HotTrackColorKey}}"
                                				To="Transparent"
                                				Duration="0:0:0.25"/>
                                            <ColorAnimation Storyboard.TargetName="marker" Storyboard.TargetProperty="Background.Color"
                                				From="Transparent"
                                				To="{DynamicResource {x:Static SystemColors.ControlLightColorKey}}"
                                				Duration="0:0:0.25"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="header" DockPanel.Dock="Bottom" >
                                <Grid.Background>
                                    <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HotTrackColorKey}}"/>
                                </Grid.Background>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter Margin="3" Content="{Binding Header, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Flyout}}}"/>
                                <ToggleButton IsChecked="{Binding IsLockedOpen, RelativeSource={RelativeSource TemplatedParent}}" UseLayoutRounding="True"
                        			Focusable="False"
                        			Margin="3" Grid.Column="1"
                        			Background="{Binding BorderBrush, ElementName=bd}">
                                    <ToggleButton.Style>
                                        <Style TargetType="{x:Type ToggleButton}">
                                            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}"/>
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                                                        <Border x:Name="btnBd" Background="{TemplateBinding Background}" Padding="3" RenderTransformOrigin="0.5,0.5">
                                                            <Path x:Name="path"  Data="F1M0,4L3,4 3,1 4,1 4,2 7,2 8,2 8,7 7,7 4,7 4,8 3,8 3,5 0,5 0,4z M7,3L4,3 4,5 7,5 7,3z" SnapsToDevicePixels="True"
                        										Fill="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" RenderTransformOrigin="0.5,0.5">
                                                                <Path.RenderTransform>
                                                                    <TransformGroup>
                                                                        <RotateTransform x:Name="rotator" Angle="0"/>
                                                                    </TransformGroup>
                                                                </Path.RenderTransform>
                                                            </Path>
                                                        </Border>
                                                        <ControlTemplate.Triggers>
                                                            <Trigger Property="IsChecked" Value="True">
                                                                <Trigger.EnterActions>
                                                                    <BeginStoryboard>
                                                                        <Storyboard>
                                                                            <DoubleAnimation Storyboard.TargetName="rotator" Storyboard.TargetProperty="Angle" To="-90" Duration="0:0:0.5"/>
                                                                        </Storyboard>
                                                                    </BeginStoryboard>
                                                                </Trigger.EnterActions>
                                                                <Trigger.ExitActions>
                                                                    <BeginStoryboard>
                                                                        <Storyboard>
                                                                            <DoubleAnimation Storyboard.TargetName="rotator" Storyboard.TargetProperty="Angle" To="0" Duration="0:0:0.5" />
                                                                        </Storyboard>
                                                                    </BeginStoryboard>
                                                                </Trigger.ExitActions>
                                                            </Trigger>
                                                            <Trigger Property="IsMouseOver" Value="True" SourceName="btnBd">
                                                                <Setter Property="Background" TargetName="btnBd" Value="White"/>
                                                                <Setter TargetName="path" Property="Stroke" >
                                                                    <Setter.Value>
                                                                        <SolidColorBrush Color="{Binding (WinChrome:VS2012.GlowColor), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />
                                                                    </Setter.Value>
                                                                </Setter>
                                                            </Trigger>
                                                            <Trigger Property="IsPressed" Value="True">
                                                                <Setter Property="Background" TargetName="btnBd">
                                                                    <Setter.Value>
                                                                        <SolidColorBrush Color="{Binding (WinChrome:VS2012.GlowColor), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />
                                                                    </Setter.Value>
                                                                </Setter>
                                                                <Setter Property="Stroke" TargetName="path" Value="White"/>
                                                            </Trigger>

                                                        </ControlTemplate.Triggers>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </ToggleButton.Style>
                                </ToggleButton>
                            </Grid>
                            <Border x:Name="bdLeftRight" BorderBrush="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" BorderThickness="3,0,3,0" >
                                <DockPanel>
                                    <Border x:Name="marker" DockPanel.Dock="Bottom" Height="3">
                                        <Border.Background>
                                            <SolidColorBrush Color="Transparent"/>
                                        </Border.Background>
                                    </Border>
                                    <ScrollViewer x:Name="sizer" VerticalScrollBarVisibility="Hidden">
                                        <ContentPresenter x:Name="content"/>
                                    </ScrollViewer>
                                </DockPanel>
                            </Border>
                        </DockPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="VerticalAlignment" Value="Bottom">
                                <Setter TargetName="header" Property="DockPanel.Dock" Value="Top"/>
                                <Setter TargetName="marker" Property="DockPanel.Dock" Value="Top"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ContentControl.Style>
</ContentControl>
